<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{padding: 100px;}
		</style>
	</head>
	<body>
		<div class="div-1" id="div-2" style="width: 200px;" onclick="ff(this)" onmouseover="f2()" onmouseenter="f3()" onmouseleave="f4()">
			 
		</div><!--[0]-->
		<script type="text/javascript"> // [1] 
			// css 一切皆描述，描述语言
			// html 一切皆盒子，标记语言，每个标记，就相当于是一个盒子
			// javascript 一切皆对象，可以说是对象编程语言，对象=属性+方法
			// 盒子对象
			// js 里面操作html盒子的时候，就可以看成是一个盒子对象
			console.dir(window);
			var a = window.document.body.children[0]; // 五层关系 //通过对象层级关系获取div盒子对象
			//var a = document.body.children[0]; // window 可以不写
			console.log('a');
			console.dir(a);
			var b = window.document.getElementById('div-2'); // 通过标签的id值获取盒子对象
			// var b= document.getElementById('div-2'); // window 可以不写
			console.log('b');
			console.dir(b);
			console.log(a === b);
			var c = document.getElementsByTagName('div')[0];
			console.log('c');
			console.dir(c);
			var d = document.getElementsByClassName('div-1')[0];
			console.log('d');
			console.dir(d);
			var e = document.querySelector('body .div-1');
			console.log('e');
			console.dir(e);
			var f = document.querySelectorAll('body .div-1')[0];
			console.log('f');
			console.dir(f);


			// 盒子对象的 style 属性 ，它表示这个黑子的行内样式。
			a.style.height = '200px';
			a.style.backgroundColor = 'red';

			// on系列事件，当我们执行某个操作时要执行的动作。
			// 事件，属于每个盒子对象都有。
			function ff(v){
				console.log('行内onclick');
				/*
				console.dir(this);
				console.dir(v);
				console.log('您点击了div盒子');
				v.style.backgroundColor = 'blue';
				console.log(a === v);
				*/
			}
			function f2(){
				//console.log('鼠标悬浮在div上');
			}
			function f3(){
				//console.log('鼠标进入了div');
			}
			function f4(){
				//console.log('鼠标离开了div');
			}

			a.onclick = function(e){ // 事件绑定 只要是使用 on开头 系列事件去触发，就是事件绑定。 对象操作的事件绑定会覆盖行内的事件绑定。
				console.log('绑定onclick');
				console.dir(e);
				var clientX = '点击的横坐标：'   + e.clientX +'<br />';
				var clientY = '点击的纵坐标:'   + e.clientY + '<br />';
				var offsetX = '点击横向偏移坐标' + e.offsetX + '<br />';
				var offsetY = '点击纵向偏移坐标' + e.offsetY + '<br />';
				a.innerHTML =  clientX + clientY + offsetX + offsetY;
			}
			//a.innerHTML = '<span>1234</span>';
			console.dir(document.body);
			document.body.onkeydown = function(event){
				console.dir(event);
				a.innerHTML += '当前按下的是：'+event.key+'键<br />';
			}
		</script>
	</body>
</html>